<!-- components/Analytics.vue -->
<script setup>
import { useTaskStore } from '../stores/taskStore'
import { computed } from 'vue'

const store = useTaskStore()

// 生成模拟分析数据（如果实际数据为空）
const analytics = computed(() => {
  // 如果 store 中没有数据，使用模拟数据
  const useMockData = store.tasks.length === 0
  
  const totalTasks = useMockData ? 15 : store.tasks.length
  const completedTasks = useMockData ? 7 : store.tasksByStatus.done.length
  const completionRate = Math.round((completedTasks / totalTasks) * 100) || 0
  
  // 成员效率数据
  const memberEfficiency = useMockData 
    ? [
        { name: '许婉婷', efficiency: 85 },
        { name: '郭新华', efficiency: 72 },
        { name: '梁正林', efficiency: 68 },
        { name: '周星星', efficiency: 90 },
        { name: '王建斌', efficiency: 55 }
      ]
    : store.members.map(member => {
        const tasksCompleted = store.tasks.filter(
          t => t.assignedTo === member.id && t.status === 'done'
        ).length
        return {
          name: member.name,
          efficiency: member.capacity > 0 
            ? Math.round((tasksCompleted / member.capacity) * 100)
            : 0
        }
      }).sort((a, b) => b.efficiency - a.efficiency)
  
  return { 
    totalTasks, 
    completionRate, 
    memberEfficiency,
    membersCount: useMockData ? 5 : store.members.length
  }
})
</script>

<template>
  <div class="analytics-container">
    <div class="analytics-header">
      <h3>项目分析概览</h3>
    </div>
    
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 21V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v16"></path>
            <rect x="3" y="9" width="18" height="4"></rect>
            <line x1="9" y1="9" x2="9" y2="13"></line>
            <line x1="15" y1="9" x2="15" y2="13"></line>
          </svg>
        </div>
        <div class="stat-content">
          <h4>总任务数</h4>
          <p class="stat-value">{{ analytics.totalTasks }}</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
            <polyline points="22 4 12 14.01 9 11.01"></polyline>
          </svg>
        </div>
        <div class="stat-content">
          <h4>完成率</h4>
          <p class="stat-value">{{ analytics.completionRate }}%</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
            <circle cx="9" cy="7" r="4"></circle>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
          </svg>
        </div>
        <div class="stat-content">
          <h4>团队成员</h4>
          <p class="stat-value">{{ analytics.membersCount }}</p>
        </div>
      </div>
    </div>
    
    <div class="section">
      <h4 class="section-title">成员效率排行</h4>
      <div class="efficiency-list">
        <div 
          v-for="(member, index) in analytics.memberEfficiency" 
          :key="member.name"
          class="efficiency-item"
        >
          <div class="member-rank">{{ index + 1 }}</div>
          <div class="member-info">
            <span class="member-name">{{ member.name }}</span>
            <span class="efficiency-value">{{ member.efficiency }}%</span>
          </div>
          <div class="progress-bar">
            <div 
              class="progress-fill"
              :style="{ width: `${member.efficiency}%` }"
              :class="{
                'high': member.efficiency >= 80,
                'medium': member.efficiency >= 50 && member.efficiency < 80,
                'low': member.efficiency < 50
              }"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 原有样式保持不变，新增以下样式 */
.member-rank {
  width: 24px;
  height: 24px;
  background: #42b983;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  margin-right: 12px;
}

.efficiency-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
}

.member-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  min-width: 0;
}

.progress-bar {
  width: 150px;
}

/* 其他原有样式... */
</style>